<template>
  <!-- Excel 导入功能组件 -->
  <upload-excel :on-success="handleSuccess" />
</template>

<script>
import { formatExcelDate } from '@/utils'
import { importEmployeeAPI } from '@/api'
export default {
  name: 'Excel',
  methods: {
    // 导入成功以后的回调函数
    async handleSuccess({ results, header }) {
      // 目标: 导入成功后, 直接发送请求, 传递给后台
      // 接口: 新增员工
      // 问题: api接口后台要的是英文key+值传给后台一个大对象
      // 但是现在表格读取的数据key是中文的
      // 解决: 把中文key+值, 转成英文key+值 对象
      // 难点: 数据的key值处理
      // js代码来解决?
      // 1. 中文key -> 英文key (一一映射准备对象)
      const obj = {
        '入职日期': 'timeOfEntry',
        '姓名': 'username',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '转正日期': 'correctionTime'
        // 如有别的自己再对应写
      }
      // 2. (第一种写法forin)遍历数组里每个对象
      // item(中文key+值)的对象
      //   const newArr = results.map(item => {
      //     // 3. 每次准备一个新对象
      //     const newObj = {}
      //     for (const key in item) { // key: 拿到中文key
      //     // obj[key] -> 换出对应的英文名
      //       const enKey = obj[key]
      //       // 给空对象添加英文key, 和原来对应的值
      //       newObj[enKey] = item[key]
      //     }
      //     // 4. return 让map收集起来(如果用forEach你自己声明空数组push)
      //     return newObj
      //   })
      //   console.log(newArr)

      // 2. (第二种写法Object.keys+循环)
      const newArr = []
      results.map(item => {
        // 产生了一个新对象, 区别: 这里先取出所有key, 再遍历换英文key, 添加到新对象上(上面一边遍历一边取key)
        const newObj = {}
        // Object.keys() 提取()里这个对象所有key键 值 放到数组里返回
        const keysArr = Object.keys(item) // ['入职日期', '姓名', '工号', ...]
        keysArr.forEach(key => {
          const enkeys = obj[key]
          if (enkeys === 'timeOfEntry' || enkeys === 'correctionTime') {
            //   表格的时间需要处理
            newObj[enkeys] = formatExcelDate(item[key])
          } else {
            newObj[enkeys] = item[key]
          }
        })
        newArr.push(newObj) // 装入数组里
      })
      console.log('批量导入数组', newArr)

      const res = await importEmployeeAPI(newArr).catch(err => err)
      if (res.success) this.$message.success(res.message)
    }
  }
}
</script>

<style lang="scss" scoped></style>
